<template>
	<view class="cdetail-content">
		
		<!-- 被评论者信息 -->
		<view class="quoter">
			<view class="comment-item" v-if="quoteList">
				<view class="top">
					<view class="user-avatar">
						<image :src="quoteList.user.avatar" mode=""></image>
					</view>
					
					<view class="center">
						<view class="user-name">	
							{{quoteList.user.name}}
						</view>
						<view class="date">
							{{quoteList.time}}
						</view>
					</view>
				</view>
				
				<!-- 评论内容 -->
				<view class="comment-content">
					<view class="father">
						{{quoteList.body}}
					</view>
					<!-- <view class="quote" v-if="commentList.quote" >
						<view class="q-content">
							<text class="q-name">{{commentList.quote.user_name}}:</text>
							<text class="q-body">{{commentList.quote.body}}</text>
						</view>
					</view> -->
				</view>
				
				<!-- 点赞与评论 -->
				<view class="bottom">
					<view class="like"  @tap="toggleLikeComment(quoteList)">
						<text :class="[quoteList.userliked?'cuIcon-appreciatefill':'cuIcon-appreciate']"></text>
						<text  class="margin-left-xs">{{quoteList.liked}}</text>
					</view>
						<!-- <text class="cuIcon-message margin-left-sm"></text> -->
				<!-- 	<view class="gocomment" v-if="quoteList.commented">
						<image src="/static/images/post/comment.svg" mode=""></image>
						<text class="margin-left-xs">{{quoteList.commented}}</text>
					</view> -->
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true"  v-if="!had_phone">
						<image src="/static/images/post/comment.svg" mode="aspectFill"></image>
						<view class="commented">{{quoteList.commented}}</view>
					</button>
					<button @tap.stop="gocomment(quoteList)"  v-else>
						<image src="/static/images/post/comment.svg" mode="aspectFill"></image>
						<view class="commented">{{quoteList.commented}}</view>
					</button>
				</view>
			</view>
		</view>
		<!-- 被评论者信息 -->
		
		
		
		
		
		
		<!-- 子级评论列表 -->
		<view class="view-content-comment" v-if="commentList.length > 0">
			<view class="child-desc">
				<view class="">全部回复</view>
				<!-- 排序方式 -->
				<view class="rank">
					<!--下拉选择框 dropdownlist-->
					<view class="tui-drop-input-box">
						<tui-dropdown-list :show="dropdownShow" :top="94" :height="400">
							<template v-slot:selectionbox>
								<view  shape="circle" @click="dropDownList('',-1)">{{rankType.name}}
									<view class="tui-animation" :class="[dropdownShow?'tui-animation-show':'']">
										<tui-icon name="turningdown" :size="20"></tui-icon>
									</view>
								</view>
							</template>
							<template v-slot:dropdownbox>
								<view class="tui-selected-list">
									<scroll-view scroll-y class="tui-dropdown-scroll">
										<block class="rank-item" v-for="(item,index) in dropdownlistData" :key="index">
											<tui-list-cell padding="0" @tap.stop="dropDownList(item,index)" :unlined="dropdownlistData.length-1==index">
												<view class="tui-cell-class">
													<!-- <tui-icon :name="item.icon" :size="item.size" :color="item.color"></tui-icon> -->
													<text class="tui-ml-20">{{item.name}}</text>
												</view>
											</tui-list-cell>
										</block>
									</scroll-view>
								</view>
							</template>
						</tui-dropdown-list>
					</view>
					<!--下拉选择框-->
				</view>
				<!-- 排序方式 -->
			</view>
			<view class="comment-item" v-for="(item,index) in commentList" :key="index">
				<view class="top">
					<view class="user-avatar">
						<image :src="item.user.avatar" mode=""></image>
					</view>
					
					<view class="center">
						<view class="user-name">	
							{{item.user.name}}
						</view>
						<view class="date">
							{{item.time}}
						</view>
					</view>
				</view>
				
				<!-- 评论内容 -->
				<view class="comment-content">
					<view class="father">
						{{item.body}}
					</view>
					<view class="quote" v-if="item.quote" >
						<view class="q-content">
							<text class="q-name">{{item.quote.user_name}}:</text>
							<text class="q-body">{{item.quote.body}}</text>
						</view>
					</view>
				</view>
				
				<!-- 点赞与评论 -->
				<view class="bottom">
					<view class="like"  @tap="toggleLikeComment(item)">
						<text :class="[item.userliked?'cuIcon-appreciatefill':'cuIcon-appreciate']"></text>
						<text  class="margin-left-xs">{{item.liked}}</text>
					</view>
					<view class="gocomment" v-if="item.commented" @tap="gocommentdetail(item.id)">
						<!-- <text class="cuIcon-message margin-left-sm"></text> -->
						<image src="/static/images/post/comment.svg" mode=""></image>
						<text class="margin-left-xs">{{item.commented}}</text>
					</view>
					<view class="reply">
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="child-reply" v-if="!had_phone">
							<image src="/static/images/icon/child_reply.png" mode=""></image>
							<text>回复</text>
						</button>
						<button class="child-reply"  @tap.stop="gocomment(item)" v-else>
							<image src="/static/images/icon/child_reply.png" mode=""></image>
							<text>回复</text>
						</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 子级评论列表 -->
		
	<!-- 评论区 -->
	<view class="view-conmment-send-bottom"> 
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="view-comment-textarea" v-if="!had_phone"><view class="textarea-comment">发表评论…</view></button>
		<view class=" view-comment-textarea " style="padding: 20rpx 26rpx;" v-else @click="clickComment()">
			<view class="textarea-comment " >发表评论…</view>
		</view>
	</view>
	<five-comment ref="detailComment" @sendComment="sendComment"  :placeholder="placeholder"></five-comment>
	<!-- 评论区 -->
		
	<!-- 遮罩区 -->	
	<view v-if="isShowMask" class="mask-f">
		<view class="mask" @click="clickCancle()"></view>
	</view>
	<!-- 遮罩区 -->
	
	</view>
</template>

<script>
	import api from '../../../common/api.js'
	import tuiIcon from '../../../components/tui-icon/tui-icon.vue'
	import fiveCommentList from '../../../components/five-comment/five-comment.vue'
	import data from '@/data';
	import dateUtils from '@/common/utils/dateUtils.js';
	
	export default {
		data() {
			return {
				had_phone:this.$store.state.phone,
				// had_phone:'',
				pid:null, //打卡id
				qid:null, //评论id
				quoteList:[], //被评论者信息
				commentList:[] ,//评论者信息
				replay_content:'',
				replay_id:'',
				//评论组件相关
				placeholder: '请输入评论内容…',
				commentParam: {},
				
				isShowMask:false,
				rankType:{name:'最新回复 ',type:' id'}, //当前排序方式
				proDropData: [],
				proDropIndex: -1,
				dropdownShow: false,
				dropShow: false,
				dropdownlistData: [{
					name: "最新回复",
					type:'id'
				}, {
					name: "热门回复",
					type:'rank'
				}],
				dropdownShow: false,
			}
		},
		onLoad(p) {
			console.log(p);
			this.pid = p.pid //打卡id
			this.qid = p.qid //评论id
			this.getCommentList()
			this.getQuoteList()
		},
		async onPullDownRefresh() {//下拉刷新
			await	this.getCommentList()
			await	this.getQuoteList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			},500)
		},
		methods:{
			async getQuoteList() {//获取用户评论详情
				this.quoteList = await api.GetPostsCommentDetail(this.qid)
			},
			async getCommentList() {//获取子级评论详情
				// console.log(this.rankType.type);
				this.commentList = await api.GetCommentDetailList(this.qid,this.rankType.type)
				console.log(this.commentList);
			},
			
			gocomment(item) {// 弹出评论框
				if(!item) {//回复打卡
					this.replay_id = 0
				}else {//回复评论
					this.replay_id = item.id
				}
				this.$refs.detailComment.open();
			},
			
			async sendComment(result) {//发送评论
				this.replay_content = result
				console.log(this.replay_content);
				console.log(this.replay_id);
				if(!this.replay_content.trim()) {
					uni.showToast({
						title:'评论不能为空',
						icon:'none',
						duration:700
					})
					return false
				}
				let res = await api.AddUserComment(this.pid,this.replay_id,this.replay_content)
				this.getCommentList()
				this.getQuoteList()
			},
			async getPhoneNumber (e) {//手机号授权
				console.log(e);
			　　if(e.detail.errMsg=="getPhoneNumber:ok"){
				console.log(e.detail.encryptedData,e.detail.iv);
			      let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
						console.log('+++++++++++',res );
						let sres = await api.SetUserPhone(res.purePhoneNumber)
						console.log(sres);
						if(sres.err == 0) {
							this.$store.commit('setPhone',res.purePhoneNumber)
							console.log(this.$store);
							uni.showToast({
								title:sres.msg,
								duration:800
							})
						}
				}else{
			        console.log('用户点击了拒绝') ;   
			    }
			},
			async getComment(pid) {//获取评论详情
				this.commentList = await api.GetPostComment(pid)
				console.log(this.commentList);
			},
			
			toggleLikeComment (item){//切换用户点赞评论
				if(item.userliked){
				  item.userliked = false
				  item.liked --
				  api.UnLikeComment(item.id)
				}else{
				  item.userliked = true
				  item.liked ++
				  api.LikeComment(item.id)
				}
			},
			gocommentdetail(cid) {
				console.log(cid);
				uni.navigateTo({
					url:'/pages/post/comps/commentdetail?qid='+cid+ '&pid=' + this.pid
				})
			},
			dropDownList(item,index) {
				this.isShowMask = true
				if (index != -1) {
					// this.tui.toast("index：" + index)
					this.rankType = item
					this.isShowMask = false
					console.log(this.rankType.type);
					this.getCommentList()
				}
				this.dropdownShow = !this.dropdownShow
				// this.isShowMask = false
			},
			clickCancle() {//取消遮罩效果,隐藏rank列表
				this.isShowMask = false;
				this.dropdownShow = !this.dropdownShow
			},
			popup: function() {
				this.popupShow = !this.popupShow
			},
			
			
			
			
			
			
			/**
			 * 获取用户信息
			 */
			getData() {
				this.detailInfo = data.dataInfo;
			},
			/**
			 * 获取评论详情
			 */
			/* getComment() {
				this.commentList = data.commentList;
			}, */
			
			/**
			 * 格式化发布日期
			 * @param {Object} dateString
			 */
			formateDate(dateString) {
				dateString = parseInt(dateString) * 1000;
				let date = new Date(dateString);
				let formatStr = dateUtils.dateFormat('YYYY年mm月dd日 HH:MM:SS', date);
				return formatStr;
			},
			
			/**
			 * 回复问题
			 */
			clickComment() {
				this.replay_id = this.qid
				this.$refs.detailComment.open();
			},
			/**
			 * 详情点赞
			 * @param {Object} isPraise
			 */
			clickPraise(isPraise) {
				let praiseParam = '1';
				let praiseNum = parseInt(this.detailInfo.PRAISE_NUM);
				switch (isPraise) {
					case '0':
						praiseParam = '1';
						praiseNum++;
						break;
					case '1':
						praiseParam = '0';
						praiseNum--;
						break;
				}
				this.detailInfo.IS_PRAISE = praiseParam;
				this.detailInfo.PRAISE_NUM = praiseNum--;
			},
			
			/**
			 *  查看图片大图
			 * @param {Object} images
			 * @param {Object} index
			 */
			cliclImage(images, index) {
				uni.previewImage({
					urls: images,
					current: index,
					longPressActions: {
						itemColor: '#12B368',
						success: function(data) {},
						fail: function(err) {}
					}
				});
			},
			/**
			 * 删除详情
			 */
			clickDeleteDetail() {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					confirmColor: '#12B368',
					success: function(res) {
						/* 调用接口删除 */
					}
				});
			},
			/**
			 * 点赞多级评论
			 * @param {Object} item
			 */
			clickPraiseComment(item) {
				//只能点赞不能取消
				if (item.IS_PRAISE == '1') {
					return;
				}
				item.IS_PRAISE = '1';
				item.PRAISE_NUM++;
			},
			/**
			 * 删除多级评论
			 */
			clickDeleteComment(item) {
				uni.showModal({
					title: '提示',
					content: '确定要删除评论吗？',
					confirmColor: '#12B368',
					success: function(res) {
						/* 调用接口删除 */
					}
				});
			},
			/**
			 * 删除多级子评论
			 */
			clickDeleteCommentChild(item) {
				uni.showModal({
					title: '提示',
					content: '确定要删除评论吗？',
					confirmColor: '#12B368',
					success: function(res) {
						/* 调用接口删除 */
					}
				});
			},
			
			/**
			 * 回复 评论
			 * @param {Object} item
			 */
			clickRecomment(item) {
				this.commentParam = {};
				this.$refs.detailComment.open();
				this.placeholder = '回复' + item.FIRSTNICKNAME + ':';
			},
			/**
			 * 回复评论的评论
			 * @param {Object} item
			 */
			clickRecommentChild(item) {
				this.commentParam = {};
				this.$refs.detailComment.open();
				this.placeholder = '回复' + item.FIRSTNICKNAME + ':';
			},
			/**
			 * 删除单级评论
			 */
			clickDeleteSig(item) {
				uni.showModal({
					title: '提示',
					content: '确定要删除评论吗？',
					confirmColor: '#12B368',
					success: function(res) {
						/* 调用接口删除 */
					}
				});
			},
			/**
			 * 点赞单级评论
			 */
			clickPraiseSig(item) {
				//只能点赞不能取消
				if (item.IS_PRAISE == '1') {
					return;
				}
				item.IS_PRAISE = '1';
				item.PRAISE_NUM++;
			},
			
			// 
			
			
			async toggleLikePost(item) {//切换点赞状态
				if(item.userliked){
				  item.liked --
				  item.userliked = false
				  let res = await api.UnLikePost(item.id)
				}else{
				  item.liked ++
				  item.userliked = true
				  let res  = await api.LikePost(item.id)
				}
			},
			
			preview(image,images){//预览图片
				uni.previewImage({
					current:image,
					urls:images
				})
			},
			
			gouserhp(uid) {//跳转到用户主页
				uni.navigateTo({
					url:'/pages/user/comps/my?id='+uid
				})
			},
			
		},
		
	}
</script>

<style lang="scss" scoped>
	.mask-f {
		z-index: 2;
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		.mask {
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, 0.3);
		}
	}
	
	.tui-scroll-box {
		width: 200rpx;
		height: 480rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 99;
		color: #fff;
		font-size: 30rpx;
		word-break: break-all;
	}
	.tui-animation {
		display: inline-block;
		transform: rotate(0deg);
		transition: all 0.2s;
	}
	
	.tui-animation-show {
		transform: rotate(180deg);
	}
	.tui-selected-list {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		transform: translateZ(0);
	}
	.tui-dropdown-scroll {
		// height: 400rpx;
		.rank-item {
			padding: 15rpx 15rpx;
		}
	}
	.tui-cell-class {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 15rpx;
		// border-top: 1rpx solid #e7e7e7;
	}
	.tui-cell-class:nth-last-child(1) {
		border-bottom: 1rpx solid #e7e7e7;
	}
	
	.tui-ml-20 {
		// margin-left: 20rpx;
		// padding: 15rpx 15rpx;
	}
	
	
	
	.cdetail-content {
		padding-bottom: 150rpx;
	}
	page {
		background: #ffffff;
	}
	.view-conmment-send-bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		background-color: white;
		border-top: 1px solid $view-bg-color;
	}
	
	.view-comment-textarea {
		background-color: $uni-bg-color-grey;
		border-radius: 40rpx;
		// padding: 15rpx 20rpx;
		text-align: unset;
		margin: 25rpx 20rpx;
		width: 80%;
		flex: 1;
		align-items: center;
	}
	.textarea-comment {
		padding: 0;
		// width: 100%;
		height: 100%;
		font-size: $uni-font-size-base;
		// color: $uni-text-color;
		color: $uni-text-sub-color;
	}
	.icon-comment {
		font-size: 46rpx;
		color: $uni-text-color;
		margin: 0 30rpx 0 5rpx;
	}
	.view-btn-comment {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: $uni-font-size-base;
		color: white;
		height: 70rpx;
		width: 120rpx;
		border-radius: 10rpx;
		background-color: $theme-color;
		font-weight: 500;
	}
	.textarea-bottom {
		background-color: white;
		padding: 20rpx;
	}
	.child-desc {
		display: flex;
		justify-content: space-between;
		padding: 10rpx  25rpx;
		font-size: 32rpx;
		color: #9a9a9a;
		.rank {
			.tui-drop-input-box {
				color: #4d4d4d;
			}
		}
	}
	.quoter {
		padding: 25rpx 0 0;
	}
	.comment-item {
		display: flex;
		flex-direction: column;
		flex: 1;
		width: 100%;
		padding: 15rpx 20rpx 2rpx;
		border-bottom: 2rpx solid #f5f5f5;
		word-break: break-all;
		.top {
			display: flex;
			align-items: center;
			// justify-content: space-evenly;
			.user-avatar {
				width: 80rpx;
				height: 80rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			.center {
				width: 500rpx;
				height: 80rpx;
				
				margin-left: 20rpx;
				font-size: 28rpx;
				.user-name {
					font-size: 30rpx;
					color: #576A94;
					font-weight: 700;
				}
				.date {
					margin-top: 7rpx;
					color: #CCCCCC;
					font-size: 24rpx;
				}
			}
			.right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 75rpx;
				font-size: 34rpx;
				.liked {
					font-size: 26rpx;
				}
			}
		}
		
		.comment-content {
			margin-left: 100rpx;
			font-size: 28rpx;
	    margin-bottom: 85rpx;
			.father {
				// padding: 10rpx;
			}
			.quote {
				width: 520rpx;
				background-color: rgba($color: #e3e3e3, $alpha: 0.5);
				border-radius: 10rpx;
				// padding: 20rpx 0;
				.q-content {
					// display: flex;
					// align-items: center;
					// line-height: 60rpx;
					padding: 6rpx 18rpx;
					color: #4D6088;
					font-size: 28rpx;
					.q-name {
						width: 150rpx;
					}
					.q-body {
						margin-left: 10rpx;
						padding: 10rpx 0;
						color: #000000;
					}
					
				}
			}
		}
		
		.bottom {
			display: flex;
			align-items: center;
			justify-content:flex-start;
			width: 600rpx;
			height: 50rpx;	
			margin: 10rpx 0 10rpx 100rpx;
			font-size: 32rpx;
			color: #4D6088;
			image {
				width: 44rpx;
				height: 42rpx;
				
			}
			button {
				display: flex;
				align-items: center;
				padding: 0;
				margin: 0;
				background: transparent;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #4D6088;
				image {
					margin-right: 10rpx;
				}
			}
			.reply {
				display: flex;
				align-items: center;
				image {
					margin-right: 6rpx;
					width: 40rpx;
					height: 40rpx;
				}
				button {
					padding: 0;
					margin: 0;
					background: transparent;
					display: flex;
					align-items: center;
					font-size: 32rpx;
				}
			}
		}
		.like,.gocomment, {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			font-size: 30rpx;
			width: 200rpx;
			image {
				margin-right: 6rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>
